<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五子棋盘上的贪吃蛇</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        h1 {
            color: #333;
            margin-bottom: 20px;
        }

        .game-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        .controls {
            margin-bottom: 20px;
            display: flex;
            gap: 10px;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            background-color: #4CAF50;
            color: white;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #45a049;
        }

        button:disabled {
            background-color: #cccccc;
            cursor: not-allowed;
        }

        .info {
            margin-bottom: 20px;
            font-size: 18px;
            color: #333;
        }

        .board {
            position: relative;
            background-color: #DEB887;
            border: 2px solid #8B4513;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(15, 30px);
            grid-template-rows: repeat(15, 30px);
            gap: 0;
        }

        .cell {
            width: 30px;
            height: 30px;
            border: 1px solid #8B4513;
            position: relative;
            cursor: pointer;
        }

        .cell::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 1px;
            background-color: #8B4513;
        }

        .cell::after {
            content: '';
            position: absolute;
            left: 50%;
            top: 0;
            bottom: 0;
            width: 1px;
            background-color: #8B4513;
        }

        .snake {
            background-color: #32CD32;
            border-radius: 50%;
            position: absolute;
            top: 2px;
            left: 2px;
            right: 2px;
            bottom: 2px;
        }

        .snake.head {
            background-color: #228B22;
        }

        .food {
            background-color: #FF6347;
            border-radius: 50%;
            position: absolute;
            top: 4px;
            left: 4px;
            right: 4px;
            bottom: 4px;
        }

        .game-over {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            font-size: 24px;
            z-index: 1000;
        }
    </style>
</head>
<body>
    <h1>五子棋盘上的贪吃蛇</h1>
    <div class="game-container">
        <div class="controls">
            <button id="startBtn">开始游戏</button>
            <button id="pauseBtn" disabled>暂停</button>
            <button id="resetBtn">重新开始</button>
        </div>
        <div class="info">
            <span>得分: <span id="score">0</span></span>
            <span style="margin-left: 20px;">长度: <span id="length">3</span></span>
        </div>
        <div class="board">
            <div class="grid" id="gameBoard"></div>
        </div>
    </div>

    <script>
        class SnakeGame {
            constructor() {
                this.boardSize = 15;
                this.board = document.getElementById('gameBoard');
                this.scoreElement = document.getElementById('score');
                this.lengthElement = document.getElementById('length');
                this.startBtn = document.getElementById('startBtn');
                this.pauseBtn = document.getElementById('pauseBtn');
                this.resetBtn = document.getElementById('resetBtn');
                
                this.snake = [{x: 7, y: 7}, {x: 6, y: 7}, {x: 5, y: 7}];
                this.direction = {x: 1, y: 0};
                this.food = this.generateFood();
                this.score = 0;
                this.gameRunning = false;
                this.gamePaused = false;
                this.gameLoop = null;
                
                this.initializeBoard();
                this.bindEvents();
                this.render();
            }
            
            initializeBoard() {
                this.board.innerHTML = '';
                for (let i = 0; i < this.boardSize * this.boardSize; i++) {
                    const cell = document.createElement('div');
                    cell.className = 'cell';
                    cell.dataset.row = Math.floor(i / this.boardSize);
                    cell.dataset.col = i % this.boardSize;
                    this.board.appendChild(cell);
                }
            }
            
            bindEvents() {
                this.startBtn.addEventListener('click', () => this.startGame());
                this.pauseBtn.addEventListener('click', () => this.togglePause());
                this.resetBtn.addEventListener('click', () => this.resetGame());
                
                document.addEventListener('keydown', (e) => {
                    if (!this.gameRunning || this.gamePaused) return;
                    
                    switch(e.key) {
                        case 'ArrowUp':
                            if (this.direction.y === 0) this.direction = {x: 0, y: -1};
                            break;
                        case 'ArrowDown':
                            if (this.direction.y === 0) this.direction = {x: 0, y: 1};
                            break;
                        case 'ArrowLeft':
                            if (this.direction.x === 0) this.direction = {x: -1, y: 0};
                            break;
                        case 'ArrowRight':
                            if (this.direction.x === 0) this.direction = {x: 1, y: 0};
                            break;
                    }
                });
            }
            
            startGame() {
                this.gameRunning = true;
                this.startBtn.disabled = true;
                this.pauseBtn.disabled = false;
                this.gameLoop = setInterval(() => this.update(), 200);
            }
            
            togglePause() {
                if (this.gamePaused) {
                    this.gamePaused = false;
                    this.pauseBtn.textContent = '暂停';
                    this.gameLoop = setInterval(() => this.update(), 200);
                } else {
                    this.gamePaused = true;
                    this.pauseBtn.textContent = '继续';
                    clearInterval(this.gameLoop);
                }
            }
            
            resetGame() {
                clearInterval(this.gameLoop);
                this.snake = [{x: 7, y: 7}, {x: 6, y: 7}, {x: 5, y: 7}];
                this.direction = {x: 1, y: 0};
                this.food = this.generateFood();
                this.score = 0;
                this.gameRunning = false;
                this.gamePaused = false;
                this.startBtn.disabled = false;
                this.pauseBtn.disabled = true;
                this.pauseBtn.textContent = '暂停';
                this.updateScore();
                this.render();
            }
            
            update() {
                if (!this.gameRunning || this.gamePaused) return;
                
                const head = {x: this.snake[0].x + this.direction.x, y: this.snake[0].y + this.direction.y};
                
                // 检查边界碰撞
                if (head.x < 0 || head.x >= this.boardSize || head.y < 0 || head.y >= this.boardSize) {
                    this.gameOver();
                    return;
                }
                
                // 检查自身碰撞
                if (this.snake.some(segment => segment.x === head.x && segment.y === head.y)) {
                    this.gameOver();
                    return;
                }
                
                this.snake.unshift(head);
                
                // 检查是否吃到食物
                if (head.x === this.food.x && head.y === this.food.y) {
                    this.score += 10;
                    this.food = this.generateFood();
                    this.updateScore();
                } else {
                    this.snake.pop();
                }
                
                this.render();
            }
            
            generateFood() {
                let food;
                do {
                    food = {
                        x: Math.floor(Math.random() * this.boardSize),
                        y: Math.floor(Math.random() * this.boardSize)
                    };
                } while (this.snake.some(segment => segment.x === food.x && segment.y === food.y));
                return food;
            }
            
            render() {
                // 清除所有蛇和食物
                document.querySelectorAll('.snake, .food').forEach(el => el.remove());
                
                // 渲染蛇
                this.snake.forEach((segment, index) => {
                    const cell = this.board.children[segment.y * this.boardSize + segment.x];
                    const snakeElement = document.createElement('div');
                    snakeElement.className = index === 0 ? 'snake head' : 'snake';
                    cell.appendChild(snakeElement);
                });
                
                // 渲染食物
                const foodCell = this.board.children[this.food.y * this.boardSize + this.food.x];
                const foodElement = document.createElement('div');
                foodElement.className = 'food';
                foodCell.appendChild(foodElement);
            }
            
            updateScore() {
                this.scoreElement.textContent = this.score;
                this.lengthElement.textContent = this.snake.length;
            }
            
            gameOver() {
                clearInterval(this.gameLoop);
                this.gameRunning = false;
                this.startBtn.disabled = false;
                this.pauseBtn.disabled = true;
                
                const gameOverDiv = document.createElement('div');
                gameOverDiv.className = 'game-over';
                gameOverDiv.innerHTML = `
                    <h2>游戏结束！</h2>
                    <p>最终得分: ${this.score}</p>
                    <p>蛇的长度: ${this.snake.length}</p>
                `;
                document.querySelector('.board').appendChild(gameOverDiv);
                
                setTimeout(() => {
                    gameOverDiv.remove();
                }, 3000);
            }
        }
        
        // 初始化游戏
        const game = new SnakeGame();
    </script>
</body>
</html>
